<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <div class="col-12">
            <!-- 标题及作者 -->
            <h1 class="mt-4 mb-4">{{ life.title }}</h1>
            <div class="col-12 alert alert-success">
                <div>
                    作者：{{ life.author }}
                </div>
                <div>
                    浏览：{{ life.total_views }}
                </div>
            </div>
            <!-- 文章正文 -->
            <div class="col-12">
                <p>{{ life.body|safe}}</p>
            </div>
            <!-- 发表评论 -->
            <hr>
            {% if user.is_authenticated %}
            <div>
                <form 
                    action="{% url 'comment:post_life_comment' life.id %}" 
                    method="POST"
                >
                {% csrf_token %}
                    <div class="form-group">
                        <label for="body">
                            <strong>
                                我也要发言：
                            </strong>
                        </label>
                        <textarea 
                            type="text" 
                            class="form-control" 
                            id="body" 
                            name="body" 
                            rows="2"></textarea>
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn btn-primary ">发送</button>                    
                </form>
            </div>
            <br>
            {% else %}
                <br>
                <h5 class="row justify-content-center">
                    请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                </h5>
                <br>
            {% endif %}
             <!-- 显示评论 -->
            <h4>共有{{ comments.count }}条评论</h4>
            <div>
                {% for comment in comments %}
                    <hr>
                    <p>
                        <strong style="color: pink">
                            {{ comment.user }}
                        </strong> 于 
                        <span style="color: green">
                            {{ comment.created|date:"Y-m-d H:i:s" }}
                        </span> 时说：
                    </p>
                    <pre style="font-family: inherit; font-size: 1em;">
                    {{ comment.body }}</pre>
                {% endfor %}
            </div> 
        </div>
        <!-- 目录 -->
        {% comment %} <div class="col-3 mt-4">
            <h4><strong>目录</strong></h4>
            <hr>
            <div>
                {{ toc|safe }}
            </div>
        </div> {% endcomment %}
    </div>
</div>

{% endblock content %}